<template>
    <!-- 面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>部门管理</el-breadcrumb-item>
        <el-breadcrumb-item>学院管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!--以下是主页面列表-->
    <el-card class="card">
        <div class="button_div">
            <el-button type="success" @click="addCollege()" :disabled="b_s" >新增</el-button>
            <el-button type="warning" @click="updateCollege" :disabled="b_s" >修改</el-button>
            <el-button type="danger" @click="deleteCollege" :disabled="b_s" >删除</el-button>
            <span class="span_t">[点击对应条目实现单选]--已选中:</span>
            <span class="span_s">{{ select }}</span>
        </div>
        <el-table highlight-current-row @current-change="handleCurrentChange" :data="paginatedData" style="width: 100%">
          <el-table-column type="index" label="序号" width="55" >
            <!--                    以下是确保在第二页的时候。序号从11开始-->
            <template v-slot="scope">
                        <span>
                            {{ (this.currentPage- 1) * this.pageSize + scope.$index + 1 }}
                        </span>
            </template>
          </el-table-column>
            <el-table-column prop="college_name" label="学院名称" width="180" />
            <el-table-column prop="major_number" label="下属专业数" width="180" />
            <el-table-column prop="class_number" label="下属班级数" width="180"/>
          <el-table-column prop="college_p_number" label="学院人数" width="180"/>
        </el-table>
      <!-- 分页栏 -->
      <div class="pagination">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="tableData.length"
            :page-size="pageSize"
            v-model:current-page="currentPage"
            @current-change="handleCurrentChange"/>
      </div>
    </el-card>
  <!--新增的对话框-->
  <el-dialog v-model="Addvisual" title="添加学院信息" width="50%">
    <AddCollege @close-dialog="closeAddForm()" @submit-form="submitAddForm" />
  </el-dialog>
  <el-dialog v-model="Upvisual" title="修改学院信息" width="50%">
    <UpCollege :current-college="currentRow" @close-dialog="closeUpForm()" @submit-form="submitUpForm" />
  </el-dialog>
</template>
<script>
    import CollegeApi from "@/api/CollegeApi";
    import AddCollege from "@/components/FormWin/AddForm/AddCollege.vue";
    import UpCollege from "@/components/FormWin/UpdataForm/UpCollege.vue"
    import stroe from "../store/index"

    export default{
      components: {
        AddCollege,
        UpCollege

      },
        data(){
            return{
                tableData:[],
                select:"未选中",
              currentRow: null,
              pageSize: 10, // 默认每页显示的条数
              currentPage: 1, // 当前页码
              Addvisual:false,//新增表单的显示
              Upvisual:false//修改表单的
            }
        },
      computed: {
        paginatedData() {
          const start = (this.currentPage - 1) * this.pageSize;
          const end = start + this.pageSize;
          return this.tableData.slice(start, end);
        },
        b_s(){ //如果是管理员，按钮可选
          if(stroe.state.userType=='admin'){
            return false;
          }
          
          return true;
        }
      },
      methods:{
        //刷新操作
        Frensh(){
          CollegeApi.getAll().then(res => {
            this.tableData = res.data.tableData;
          });
        },
        handleCurrentChange(val) {
          this.currentRow = val;
          if (val) {
            this.select = `第${this.paginatedData.findIndex(row => row.college_name === val.college_name) + 1}条 - 学院名称: ${val.college_name}}`;
          }
          else {
            this.select = "未选中";
          }
        },
        addCollege() {
          // 新增学院逻辑
          this.Addvisual=true;
          //显示表单后，后面去表单提交函数执行
        },
        updateCollege() {
          if (!this.currentRow) {
            this.$message({
              message: '请先选择要修改的学院',
              type: 'warning'
            });
            return;
          }
          // 修改学院逻辑
          this.Upvisual=true;
        },
        deleteCollege() {
          // 删除学院逻辑
          if (!this.currentRow) {
            this.$message({
              message: '请先选择要删除的学院',
              type: 'warning'
            });
            return;
          }
          //已经选中了后
          else{
            this.$confirm(`确定要删除学院名: ${this.currentRow.college_name} 吗?！`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {// 用户确认删除
              CollegeApi.del_one(this.currentRow.college_name).then(res => {
                if (res.data === 1) {
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                }
                else{
                  this.$message({
                    message: '[删除失败]-此学院下属的部门尚未清空！（专业，班级或学生）',
                    type: 'error'
                  });
                }
                this.Frensh();
              })
            }).catch(()=>{
              this.$message({
                message: '取消删除',
                type: 'success'
              });
            })
          }
        },
        //以下是弹出表单相关的处理方法。
        //打开，关闭。
        closeAddForm(){
          this.Addvisual=false;
        },
        closeUpForm(){
          this.Upvisual=false;
        },
        //以下是表单提交等
        submitAddForm(formDate){
          //先要验证，学院是否重复了
          const idExists = this.tableData.some(college => college.college_name === formDate.college_name);
          if (idExists) {
            this.$message({
              message: '学院已存在！',
              type: 'warning'
            });
            this.Addvisual=false;
            return;
          } else {
            //如果学院没重复，合法的，存后端。
            CollegeApi.add_one(formDate).then(res=>{
              if(res.data==1){
                this.$message({
                  message:'添加学院成功！',
                  type:'success'
                })
                this.Addvisual=false;
                //如果成功，刷新页面
                this.Frensh();
              }
              else{
                this.$message({
                  message:'添加学院失败！',
                  type:'error'
                })
                this.Addvisual=false;
              }
            })

          }
        },
        //修改
        submitUpForm(formDate){
          this.$confirm(`确定要修改学院: ${this.currentRow.college_name} 吗?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {// 用户确认修改
            CollegeApi.updata_one(formDate,this.currentRow.college_name).then(res => {
              if (res.data === 1) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
              }
              else{
                this.$message({
                  message: '修改失败',
                  type: 'error'
                });
              }
              this.Upvisual=false;
              this.Frensh();
            })
          }).catch(()=>{
            this.$message({
              message: '取消修改',
              type: 'success'
            });
          })
        },
        handleResize() {
          // 检查窗口高度并调整pageSize
          const  win_height=window.innerHeight;
          if(win_height <= 750){
            this.pageSize = 10;
          }
          else if (win_height > 750 && win_height <=800) {
            this.pageSize = 11;
          }
          else if(win_height > 800 &&  win_height<=850){
            this.pageSize = 12;
          }
          else if(win_height > 850 && win_height <=900){
            this.pageSize = 13;
          }
          else if(win_height > 900 && win_height <=950){
            this.pageSize = 14;
          }
          else if(win_height > 950) {
            this.pageSize = 15;
          }
        }
      },
      created(){
        //刷新界面就重新获取一遍
        CollegeApi.getAll().then(res=>{
          this.tableData=res.data.tableData;
        })
      },
      mounted() {
        this.handleResize();
        window.addEventListener('resize', this.handleResize);
      },
      beforeUnmount() {
        window.removeEventListener('resize', this.handleResize);
      }
    }
</script>
<style lang="css" src="../styles/main.css" scoped />
